<template>
  <view class="praise-box" @click="onPraise">
    <image class="img" v-if="isPraise" src="/static/images/praise.png" />
    <image class="img" v-else src="/static/images/un-praise.png" />
    <text class="txt">点赞</text>
  </view>
</template>

<script>
import { userPraise } from '../../api/user'
import isLogin from '../../mixin/isLogin'
export default {
  name: 'article-praise',
  mixins: [isLogin],
  props: {
    articleData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isPraise: false // 点赞
    }
  },
  watch: {
    articleData: {
      handler() {
        this.isPraise = this.articleData.isPraise
        console.log(this.articleData.isPraise, 'praise')
      }
    }
  },

  methods: {
    /**
     * 点赞
     */
    async onPraise() {
      const isOK = this.isLogin()
      if (!isOK) return
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      await userPraise({
        articleId: this.articleData.articleId,
        isPraise: !this.articleData.isPraise
      })
      console.log(this.articleData.articleId)
      uni.hideLoading()
      // 更新数据
      this.isPraise = !this.isPraise
    }
  }
}
</script>

<style lang="scss" scoped>
.praise-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img {
    width: $uni-img-size-base;
    height: $uni-img-size-base;
    color: $uni-text-color;
  }

  .txt {
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
  }
}
</style>
